<template>
    <div class="top">
        <headIndex :hindex="num" @getCat="valueChange" />
        <div class="main_ny mt20">
            <div class="article">               
                <div v-for="(item, index) in qusetionList" class="question clearfix">
                    <div class="num fl">{{index + 1}}</div>
                    <div class="content fl">
                        <div class="title">
                            <span v-if="item.timuleixingid == '1'">单选题</span>
                            <span v-if="item.timuleixingid == '2'">多选题</span>
                            <span v-if="item.timuleixingid == '3'">填空题</span>
                            :{{item.neirong}}</div>
                            <template v-if="item.timuleixingid == '1'">
                              <my-radio :radioData="item.xuanxiangRespList" :radioName="index" @radioChange="radioChange"></my-radio>
                            </template>
                            <template v-if="item.timuleixingid == '2'">
                              <my-checkbox :checkboxData="item.xuanxiangRespList" :checkboxName="index" @checkboxChange="checkboxChange"></my-checkbox>
                            </template>
                            <template v-if="item.timuleixingid == '3'">
                              <my-textarea :textareaName="index" @changeTextarea="changeTextarea"></my-textarea>
                            </template>
                    </div>
                </div>
                <div style="text-align:center;margin-top:50px">
                  <el-button type="danger" @click="submit">提交问卷</el-button>
                  <el-button type="warning" @click="cancel">取消</el-button>
                </div>
            </div>
        </div>    
        <footIndex />
    </div>
</template>  
<script setup name="article">
import headIndex from './components/headIndex/index.vue'
import footIndex from './components/footIndex/index.vue'
import MyRadio from './components/myRadio/index'
import MyCheckbox from './components/myCheckbox/index'
import MyTextarea from './components/myTextarea/index'
import { getQuesTopic, submmitQuestion } from "@/api/yxzx/info"; 
export default {
    components: {
        headIndex,
        footIndex,
        MyRadio,
        MyCheckbox,
        MyTextarea
    },
    data() {
      return {
        loading: false,
        num: 7,
        qusetionList: [],
        catID: '',
        isvalid: '1',
        radio: '',
        queryData: [],
      }
    },
    created() {
        this.getArt()
    },
    methods: {
        getArt() {
            this.loading = true
            getQuesTopic(this.GetQueryString('id'), '').then((response) => {
              this.loading = false
              this.qusetionList = response.data.wenjuanTimuList
            })
        },
        // 单选事件
        radioChange(data, name) { 
          const question = this.qusetionList[name];
          const newarr = this.queryData.filter(item => item.timuid !== data.xuanxiangtimuid)
          // this.queryData.map((item)=>{
          //    if(item.timuid == data.xuanxiangtimuid){
          //     this.queryData.splice(item,1)
          //    }
          // })
          const obj = {}
          obj.tikuid = this.GetQueryString('id')
          obj.timuid = question.timuid
          obj.timuleixingid = question.timuleixingid
          obj.xuanxiangid = data.xuanxiangid
          obj.neirong = data.xuanxiangneirong
          newarr.push(obj)
          this.queryData = newarr
          // console.log(this.queryData)
        },
        // 多选事件
        checkboxChange(data, name) {
          const question = this.qusetionList[name];
          let arr = []   
          const xid = data[0].xuanxiangtimuid  
          data.map((item)=>{
            const obj = {}
            obj.tikuid = this.GetQueryString('id')
            obj.timuid = question.timuid
            obj.timuleixingid = question.timuleixingid
            obj.xuanxiangid = item.xuanxiangid
            obj.neirong = item.xuanxiangneirong
            arr.push(obj)          
          })    
          // this.queryData.forEach((value,index) =>{  
          //   if(value.timuid == data[0].xuanxiangtimuid){
          //     console.log(value)
          //     this.queryData.splice(value)
          //   }
          // })
          const newarr = this.queryData.filter(item => item.timuid !== xid)
          this.queryData = newarr.concat(arr) 
          // console.log(this.queryData) 
        },
        // 填空事件
        changeTextarea(data, name) {
          const tk_id = this.qusetionList[name].timuid
          const newarr = this.queryData.filter(item => item.timuid !== this.qusetionList[name].timuid)
          const question = this.qusetionList[name];
          // this.queryData.forEach((value,index) =>{
          //   if(value.timuid == question.timuid){
          //     this.queryData.splice(value,1)
          //   }
          // })
          const obj = {}
          obj.tikuid = this.GetQueryString('id')
          obj.timuid = question.timuid
          obj.timuleixingid = question.timuleixingid
          obj.neirong = data
          newarr.push(obj)
          this.queryData = newarr
          // console.log(this.queryData)
        },
        
        // 获取地址栏的参数
        GetQueryString (name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
            var r = window.location.search.substr(1).match(reg)
            if (r != null) {
            return decodeURI(r[2])
            } else {
            return null
            }
        },
        // 提交问卷
        submit(){
            if(this.queryData.length <= 0){
              this.$message({
                message: '请选择问卷内容',
                type: 'warning'
              });
            } else {
              // console.log(this.queryData)
              submmitQuestion(this.queryData).then((response) => {
                this.$message({
                  message: '问卷提交成功！',
                  type: 'success',
                  onClose:()=>{
                    location.reload();
                  }
                });
              })
            }
        },
        cancel(){
          location.reload();
        },
        valueChange(){},
        // 数组去重
        goRepeat(arr){
            let list = []
            return arr.filter((item)=> !list.includes(item.xuanxiangid) && list.push(item.xuanxiangid))
        }
    }  
}
</script>
<style scoped lang="scss">
.main_ny .article .cont a img{
   width: 16px;
   height: 16px; 
}
::v-deep .el-radio {
    margin-right: 0px;
}
::v-deep .el-checkbox {
    margin-right: 10px;
}
</style>   